<template>
  <view>
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000"
    :duration="1000" :circular="true">
    <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/goodsHuo/goodsHuo?goods_id='+ item.id">
        <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.photo"></image>
        </navigator>
      </swiper-item>
    </swiper>
    
    <!-- 分类 -->
    <view class="fenlei" v-for="(item,index) in fenImages" :key='index' @click="ToGoods(index)">
          <image :src="item.photo" class="fen_img"></image>
    </view>
    
    <view class="Title">藏品推荐</view>
    <view class="miniTit">
      Collection recommendation
    </view>
    <view class="cangpi" v-for="(item,index) in cangList" :key='index' @click="ToCang">
          <view class="img_div">
            <image :src="item.photo" class="cang_img"></image>
          </view>
    </view>
    
  </view>
</template>
<script>
  export default {
    data() {
      return {
        // 1. 轮播图的数据列表，默认为空数组
        swiperList: [],
        // 分类浏览
        fenImages:[],
        //藏品推荐
        cangList:[]
      };
      
    },
    onLoad() {
      this.getSwiper()
    },
    methods: {
      async getSwiper() {
        const {data:res } = await uni.$http.get('/first-exhibition/select')
        console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        res.data.forEach( (item, index)=> {
            if (item.explainZlc === '轮播图') {
                this.swiperList.push(item)
            }
            else if (item.explainZlc === '藏品') {
                this.cangList.push(item)
             }
            else {
                this.fenImages.push(item)
            }
        })
        // this.swiperList = res.data
      },
      gotoSearch() {
        uni.navigateTo({
        url: '/subpkg/search/search'
        })
      },
      ToGoods(val) {
        if(val == 0) {
          uni.navigateTo({
            url: '/subpkg/goodsList/goodsList'
          })
        }
        else {
          uni.navigateTo({
            url: '/subpkg/goodsZhuan/goodsZhuan'
          })
        }
      },
      ToCang() {
        uni.navigateTo({
          url: '/subpkg/goodsCang/goodsCang'
        })
      }
      
    }
  }
</script>

<style lang="scss">
  .Title {
    // text-align: left;
    color: white;
    font-size: 40rpx;
    letter-spacing: 10rpx;
    font-weight: 600;
    margin-left: 20rpx;
  }
  .miniTit {
    color: white;
    // text-align: center;
    font-size: 20rpx;
    letter-spacing: 2rpx;
    font-weight: 400;
    margin-left: 20rpx;
    margin-top: 5rpx;
    margin-bottom: 10rpx;
  }
  swiper {
    height: 330rpx;
    .swiper-item,
      image {
      width: 100%;
      height: 100%;
    }
  }
  
  .fenlei {
   display: inline-block;
   width: 45%;
   height: 200rpx;
   margin: 50rpx 0;
   margin-left: 25rpx;
   border-radius: 10px;
   overflow: hidden;
   .fen_img {
     width: 100%;
     height: 100%;
   }
  }
  .cangpi {
   display: inline-block;
   width: 45%;
   height: 400rpx;
   margin: 10rpx 0;
   margin-left: 25rpx;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   background-color: #253143;
   .img_div {
      width: 90%;
      height: 100%;
      margin: 15rpx auto;
      overflow: hidden;
      border-radius: 20rpx;
     .cang_img {
       width: 100%;
       height: 100%;
     }
   }

   .cang_name {
     position: absolute;
     bottom: 10%;
     left: 10%;
     color: #fff;
     font-size: 30rpx;
     font-weight: 500;
   }
  }
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }
</style>
